<template>
    <span class="flex">
        <el-date-picker
            style="margin-right: 10px;"
            v-model="selectedDate"
            type="date"
            size="small"
            :clearable="false"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
        </el-date-picker>
        <el-time-picker
            size="small"
            is-range
            :clearable="false"
            :picker-options = "{'format': timeRangeFormat}"
            v-model="timeRange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围">
        </el-time-picker>
    </span>
</template>

<script>
  export default {
    name: "ya-day-time-picker",
    data() {
      return {
        timeRange: [new Date(), new Date()],
        selectedDate: dateFormat(new Date(), "yyyy-MM-dd")
      }
    },
    props: {
      dayTimeRang: {
        type: Array,
        default: () => {
          return [];
        }
      },
      selectedDay: {
        type: String,
        default: dateFormat(new Date(), "yyyy-MM-dd")
      },
      timeRangeFormat: {
        type: String,
        default: "HH:mm:ss"
      }
    },
    created() {
      if(this.dayTimeRang.length == 2) {// 证明有初始值
        const startDate = new Date(this.dayTimeRang[0]);
        const endDate = new Date(this.dayTimeRang[1]);
        this.selectedDate = startDate;
        this.timeRange[0] = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate(),
          startDate.getHours(), startDate.getMinutes(),startDate.getMilliseconds());
        this.timeRange[1] = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate(),
          endDate.getHours(), endDate.getMinutes(),endDate.getMilliseconds());
      }else {
        const day = new Date(this.selectedDay);
        this.selectedDate = this.selectedDay;
        this.timeRange[0] = new Date(day.getFullYear(), day.getMonth(), day.getDate(), 0, 0,0);
        this.timeRange[1] = new Date(day.getFullYear(), day.getMonth(), day.getDate(), 23, 59,59);
        this.emitDayTimePicker();
      }
    },
    methods: {
      emitDayTimePicker() {
        const day = new Date(this.selectedDate);
        const timeStart = this.timeRange[0];
        const timeEnd = this.timeRange[1];
        let startDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), timeStart.getHours(), timeStart.getMinutes(), timeStart.getSeconds());
        let endDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), timeEnd.getHours(), timeEnd.getMinutes(), timeEnd.getSeconds());

        let timeRange = [dateFormat(startDate, "yyyy-MM-dd hh:mm:ss"), dateFormat(endDate, "yyyy-MM-dd hh:mm:ss")];
        this.$emit('update:dayTimeRang', timeRange);
      }
    },
    watch: {
      selectedDay() {
        const day = new Date(this.selectedDay);
        this.selectedDate = this.selectedDay;
        this.timeRange[0] = new Date(day.getFullYear(), day.getMonth(), day.getDate(), 0, 0,0);
        this.timeRange[1] = new Date(day.getFullYear(), day.getMonth(), day.getDate(), 23, 59,59);
        this.emitDayTimePicker();
      },
      selectedDate(){
        this.emitDayTimePicker();
      },
      timeRange() {
        this.emitDayTimePicker();
      }
    }
  }

  function dateFormat(date, format) {
    format = format || 'yyyy-MM-dd hh:mm:ss';
    if (date !== 'Invalid Date') {
      let o = {
        "M+": date.getMonth() + 1, //month
        "d+": date.getDate(), //day
        "h+": date.getHours(), //hour
        "m+": date.getMinutes(), //minute
        "s+": date.getSeconds(), //second
        "q+": Math.floor((date.getMonth() + 3) / 3), //quarter
        "S": date.getMilliseconds() //millisecond
      }
      if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
        (date.getFullYear() + "").substr(4 - RegExp.$1.length));
      for (let k in o)
        if (new RegExp("(" + k + ")").test(format))
          format = format.replace(RegExp.$1,
            RegExp.$1.length === 1 ? o[k] :
              ("00" + o[k]).substr(("" + o[k]).length));
      return format;
    }
    return '';
  }

  /**
   * 根据传入的时间转换成时间段
   * 传入 00:00:00 返回 0
   * 传入 01:20:00 返回 1 * 60 + 20
   *
   * @param time
   */
  function getTimeSlotIndexByTime (time, duration) {
    const hour = parseInt(time.split(":")[0]);
    const minute = parseInt(time.split(":")[1]);

    return hour * (60 / duration) + (minute / duration);
  }


  /**
   * 根据事件段获取时间(每一分钟一个时间段)
   * 传入0 返回00:00
   * 传入1 返回00:01
   * @param timeSlotIndex
   * @returns {string}
   */
  function getTimeByTimeSlotIndex(timeSlotIndex, duration) {
    if(timeSlotIndex == 24 * 60 / duration) {
      return `00:00`
    }
    const minutes = timeSlotIndex * duration;
    let hour = Math.floor(minutes / 60);
    if(hour < 10) hour = "0" + hour;

    let minute = minutes % 60;
    if(minute < 10) minute = "0" + minute;

    return `${hour}:${minute}`
  }

  function appendZero(obj) {
    if('NaN' == parseInt(obj).toString()) {
      return;
    }
    return parseInt(obj) < 10 ? "0" + obj : obj;
  }
</script>

<style scoped>

</style>